<template>
  <div id="content">
    <div class="all" v-loading="loading">
      <el-page-header @back="back" style="margin-bottom: 8px" content="发帖">
      </el-page-header>
      <div>
        <el-form ref="form" :model="editMsgForm" label-width="70px">
          <el-form-item label="标题">
            <el-input
              placeholder="小于30个字符"
              v-model="editMsgForm.title"
            ></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <el-input
              type="textarea"
              :rows="8"
              placeholder="小于500个字符"
              v-model="editMsgForm.content"
            ></el-input>
          </el-form-item>
          <el-form-item label="上传图片">
            <el-upload
              ref="uploadImgs"
              action="wsw/images/upload"
              list-type="picture-card"
              name="imgFile"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :show-file-list="true"
              :limit="12"
              :on-exceed="exceed"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>

            <!-- <el-upload
              class="upload-demo"
              action="/wsw/postImage/upload"
              name="imgFile"
              :on-success="success"
              :on-remove="handleRemove"
              :file-list="fileList"
              :limit="3"
              :before-upload="beforeAvatarUpload"
              list-type="picture"
            >
              <el-button size="small" type="primary" :disabled="permission < 0"
                >点击上传</el-button
              >
              <div slot="tip" class="el-upload__tip">
                只能上传3张图片，且每张不超过5MB
              </div>
            </el-upload> -->
          </el-form-item>

          <el-form-item label="分类">
            <el-radio-group v-model="editMsgForm.classification">
              <el-radio label="表白">表白</el-radio>
              <el-radio label="吐槽">吐槽</el-radio>
              <el-radio label="失物招领">失物招领</el-radio>
              <el-radio label="公告">公告</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 添加标签  夭折 -->
          <!-- <el-tag
            :key="tag"
            v-for="tag in editMsgForm.dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
            size="small"
          >
            {{ tag }}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="mini"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          >
          </el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="mini"
            @click="showInput"
            >+ New Tag</el-button
          > -->

          <el-form-item style="margin-top: 10px">
            <el-button type="primary" :disabled="permission < 0" @click="post"
              >发送</el-button
            >
            <el-button @click="cancel">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- <div class="back" style="overflow: hidden">
      <el-button type="success" style="float: right" @click="back"
        >返回主页</el-button
      >
    </div> -->
  </div>
</template>

<script>
export default {
  name: "edit-message",
  data() {
    return {
      editMsgForm: {
        title: "",
        content: "",
        classification: "",
        // dynamicTags: [], 标签
      },
      inputVisible: false,
      inputValue: "",
      loading: false,
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },

  methods: {
    // // 删除标签
    // handleClose(tag) {
    //   this.editMsgForm.dynamicTags.splice(
    //     this.editMsgForm.dynamicTags.indexOf(tag),
    //     1
    //   );
    // },
    // // 添加新标签
    // showInput() {
    //   this.inputVisible = true;
    //   this.$nextTick((_) => {
    //     this.$refs.saveTagInput.$refs.input.focus();
    //   });
    // },

    // handleInputConfirm() {
    //   let inputValue = this.inputValue;
    //   if (inputValue) {
    //     this.editMsgForm.dynamicTags.push("#" + inputValue);
    //   }
    //   this.inputVisible = false;
    //   this.inputValue = "";
    // },

    // 删除图

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 显示预览图
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传图片超出限制
    exceed() {
      this.$message({
        message: "最多上传12张图片哦",
        type: "warning",
      });
    },
    async post() {
      let result = await this.$API.reqEditMsg(this.editMsgForm);
      if (result.code == 2000) {
        this.$message({
          message: "发布成功",
          type: "success",
        });
        this.editMsgForm = {};
        this.$router.push("/home");
      }
    },
    back() {
      this.$router.push("/home");
    },
    cancel() {
      this.editMsgForm = {};
      this.$refs.uploadImgs.clearFiles();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-page-header {
  .el-page-header__left {
    margin-right: 28px;
  }
  .el-page-header__content {
    font-size: 20px;
  }
}

.el-tag {
  margin-right: 3px;
}
</style>